%load_ext pretty_jupyter

Introduction

The point of this notebook is to demonstrate the main features of Pretty Jupyter. This document, however, does not mean to repeat everything described on the wiki, rather than it means to show how to actually use it in practice.

Styling

As you can notice in the generated HTML document, the styles are quite different than the default. You can tweak them even more by classic <style> tag. The following cell does just that and it alters the header of this chapter.

%%html

<style>
    #styling {
        font-weight: bold;
        font-family: Helvetica;
    }
</style>

JavaScript can be applied very similarly.

Table of Contents

One of the main capabilities is Table of Contents. It is automatically generated based on headers specified in Markdown or HTML (Markdown is recommended for safety). It can however be turned off by specifying in the notebook's metadata. We can view the features-demo.ipynb notebook as json and overwrite the following property to false:

"toc": true

Tabset

Another important functionality is the Tabset. It allows us to switch the tabs. It works the following way:

  1. On the line below some header we write <span class='pretty-jupyter-token tabset' style='display: none;'></span>.
  2. All sub-headers of this header and their content becomes tabbed content.

To demonstrate this, we wrote this magical line under the Tabset header. And hence the following subsections will be tabbed.

Subsection 1

Content 1.

Subsection 2

Content 2.

Subsection 3

Content 3.

Markdown with Jinja

Another very important feature is so called Jinja Markdown. It allows us to combine Markdown with Python variables. It can even be combined with using Maths. It is demonstrated in the cells below:

a = 10
b = 3

%%jinja markdown

$$

\frac{a}{b} = \frac{ {{a}} }{ {{b}} } = {{ (a / b) | round(2) }}

$$
$$ \frac{a}{b} = \frac{ 10 }{ 3 } = 3.33 $$

To make a code cell a Jinja Markdown cell, its first line needs to have the following content:

%%jinja markdown

Then you write standard Markdown and when you want to use some variable, you specify e.g. {{ variable_name }}.

This concept is very powerful and can be used to display dynamically created tables or images, too. By default, the input of the Markdown is removed in the HTML document. This can, however, be overidden, see the docs.

Code Folding

You might've noticed that there are a lot of Hide buttons on the right. This is a functionality called Code Folding. It allows us to hide and show code and results in a more dynamic and visually appealing report. There is also a button on the top with Code All that allows us to toggle all codes on or off.

This functionality can be tweaked in the notebook's metadata. There is the following property in this notebook's json (open it as text):

"code_folding": "show"

Value show means that all code cells inputs will be visible at the document load. If we specify value hide in there, then all codes will be hidden at the beginning (this is also default when the property is missing). Any other value will result in the Code Folding functionality being turned off, hence all inputs will be visible.

a = 10